<template>
    <div id="visual">
        <div class="page">
            <!-- 头部 -->
            <topComponent back name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({ path: '/ksh' })"></topComponent>
            <div class="nav">
                {{ query.projectName }} - {{query.bidName  }}
            </div>
            <!--  -->
            <div class="main">
                <div class="layout_content_left">
                    <el-scrollbar style="height: 100%;">
                        <template v-for="(item, index) in list_people">
                            <ul v-if="item.children.length > 0" :key="index">
                                <li><span class="layout_content_left_span"
                                        :style="{ backgroundColor: '#009eed'}">{{ item.label }}</span></li>
                                <li v-for="(ite, inde) in item.children" :key="inde">
                                    <div class="imgbox" :style="{ border: `1px solid ${ite.color}` }">
                                        <img v-if="ite.facePic" :src="ite.facePic" alt="" />
                                        <img v-else
                                            :src="require('@/views/witness/components/Object3D/canvas/默认头像.png')"
                                            alt="" />
                                        <div>
                                            <p>{{ ite.personName }} </p>
                                        </div>
                                        <el-checkbox  v-if="ite.personType !== 'GZRY'" @change="handleSelectItem()"
                                            style="position: absolute;right: 1px;bottom: -2px;"
                                            v-model="ite.checked"></el-checkbox>
                                    </div>
                                </li>
                            </ul>
                        </template>
                    </el-scrollbar>
                </div>
                <div class="layout_content_right">
                    <el-scrollbar>
                        <el-steps :active="active" class="my-steps">
                            <template v-for="(item, index) in list_step">
                                <el-step :key="index"
                                    :icon="item.type === 1 ? 'iconfont icon-bluedian' : 'iconfont icon-jingbaodeng'"
                                    :title="item.title">
                                    <!-- <i  class="icon-yujing" slot=icon ></i> -->
                                    <template #title>
                                        <p @click="fnGetAllAlarmId(item)">{{ item.title }}</p>
                                    </template>
                                    <template #description>
                                        <p v-if="item.title !== '查看'">{{ item.time }}</p>
                                        <div v-if="item.show" class="box_description">
                                            <div class="close"> <i @click="item.show = false" class="el-icon-close"></i>
                                            </div>
                                            <p>识别到：{{ item.content.alarmTime }}</p>
                                            <p>行为：{{ item.content.alarmContent }}</p>
                                        </div>
                                    </template>
                                </el-step>
                            </template>
                        </el-steps>
                    </el-scrollbar>
                    <div class="box_3d">
                        <proViewComponent ref="proView" progress gzrylerg :onGetWanger="onGetWanger" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topComponent from "@/components/top"
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import { trackGetAlarm } from "@/api/pageStats"
import { dvListPerson,dvListTrack } from "@/api/pageViewBig"
export default {
    components: {
        topComponent,
        proViewComponent
    },
    data() {
        return {
            active: null,
            list_step: [],
            list_people: [],
            query:{}
        }
    },
    created(){
        this.query = this.$route.query;
        // 处理工作人员 ==== 》
        if(this.query.personType && this.query.personType === 'GZRY'){
            this.query.projectId = undefined
            this.query.bidId = undefined
            console.log(111111);
            
            return  this.handleQueryGZRY()
        }
        this.getTrackListPerson()

    },
    mounted(){
           setTimeout(() => {
            this.fnSetproViewlou()
           }, 300);
    },
    methods: {
        // 处理工作人员
       async handleQueryGZRY(){
        const query = Object.assign({},this.query)
            const stringToColor = (str) => {
                let hash = 0;
                for (let i = 0; i < str.length; i++) {
                    hash = str.charCodeAt(i) + ((hash << 5) - hash);
                }
                const color = `#${((hash >> 0) & 0xFFFFFF).toString(16).padStart(6, '0')}`;
                return color;
            }
            const peopleList = {
                'GZRY': {
                    color: '#68F60C',
                    name: '工作人员组',
                    label: '工作人员',
                    children: []
                }
            
            }
            const guiji = await this.getTrackListTrack([query.personId],query.floorName)
            if(guiji.code !== 0  || guiji.data.length === 0) return 
            const  trackList = guiji.data[0].trackList
            peopleList['GZRY'].children.push({...query,color:stringToColor(query.personName),trackList})
            this.list_people = peopleList
            // 步骤条
            this.list_step = [
                {
                    type: 1,
                    title: '进入评标区',
                    time: query.cardBindTime,
                    show: false
                },
                {
                    type: 1,
                    title: '离开评标区',
                    time: query.cardUnBindTime,
                    show: false
                }
                
                
            ]
            this.active = this.list_step.length
            // 轨迹数据
            this.$refs['proView'].handleLineAll(peopleList['GZRY'].children,[stringToColor(query.personName)])
        },
        // 切换楼层
        fnSetproViewlou(){
            const {floorName} =   this.query
            this.$refs['proView'].handleTabsLouceng(floorName)
        },
        onGetWanger() {

        },
        // 生成步骤条 - 单人 - 多人
        fnChangeSteps(alarmIdList = [], cardBindTime = '', cardUnBindTime = '') {
            // 假数据
            let { pbEndTime, pbStartTime } = this.query
            const list_step = []
            const times = [cardBindTime, pbStartTime, pbEndTime, cardUnBindTime]
            const texts = ['进入评标区', '开始评标', '结束评标', '离开评标区']
            const convertToTimestamp = (date) => {
                return new Date(date).getTime()
            }
            // 2预警 1普通
            times.forEach((e, i) => {
                if (!e) return
                let obj = {
                    type: 1,
                    title: texts[i],
                    time: times[i],
                    show: false
                }
                list_step.push(obj)
            });
            const arr1 = []
            const arr2 = []
            const arr3 = []

            alarmIdList.forEach(x => {
                const { timestamp, dateTime, alarmId } = x
                let obj = {
                    type: 2,
                    title: '查看',
                    time: dateTime,
                    alarmId,
                    show: false,
                    content: null
                }
                if (timestamp > convertToTimestamp(cardBindTime) && timestamp < convertToTimestamp(pbStartTime)) {
                    arr1.push(obj)
                } else if (timestamp > convertToTimestamp(pbStartTime) && timestamp < convertToTimestamp(pbEndTime)) {
                    arr2.push(obj)
                } else if (timestamp > convertToTimestamp(pbEndTime) && timestamp < convertToTimestamp(cardUnBindTime)) {
                    arr3.push(obj)
                }
            })
            if (alarmIdList.length === 0) {
                this.list_step = [list_step[0], list_step[1]]
                this.progress = false
                return
            }
            if (list_step.length === 2) {
                this.list_step = [list_step[0], ...arr2, list_step[1]]
            } else {
                this.list_step = [list_step[0], ...arr1, list_step[1], ...arr2, list_step[2], ...arr3, list_step[3]]
            }
            this.active = this.list_step.length
        },
        // 选中某mourn
        handleSelectItem() {
            const convertToTimestamp = (date) => {
                return new Date(date).getTime()
            }


            const list = []
            for (const [k, v] of Object.entries(this.list_people)) {
                if (v.children.length <= 0) {
                    break;
                }
                for (const [k2, v2] of Object.entries(v.children)) {
                    if (v2.checked) {
                        list.push(v2)
                    }
                }
            }
            //  模拟数据 
            const alarmIdList = [
                {
                    "floorName": "十二楼",
                    "pos": [54.892, 19.558, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-07 22:59:19",
                    "timestamp": convertToTimestamp('2024-12-07 22:59:19'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe26f980062"
                },
                {
                    "floorName": "十二楼",
                    "pos": [54.892, 19.558, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-07 23:48:18",
                    "timestamp": convertToTimestamp('2024-12-07 23:48:18'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe29e5e0075"
                },
                {
                    "floorName": "十二楼",
                    "pos": [58.033268, 22.66371, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-08 03:48:18",
                    "timestamp": convertToTimestamp('2024-12-08 03:48:18'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe285bd0071"
                },
                {
                    "floorName": "十二楼",
                    "pos": [36.3559, 4.06252, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-08 22:48:56",
                    "timestamp": convertToTimestamp('2024-12-08 22:48:56'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe31b270118"
                },
                {
                    "floorName": "十二楼",
                    "pos": [28.442162, 4.115754, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-08 23:49:07",
                    "timestamp": convertToTimestamp('2024-12-08 23:49:07'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe344320145"
                },
                {
                    "floorName": "十二楼",
                    "pos": [28.430296, 13.751032, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-09 23:49:11",
                    "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe353cb014e"
                },
                {
                    "floorName": "十二楼",
                    "pos": [20.273283, 4.067175, 0],
                    "speed": [0, 0, 0],
                    "dateTime": "2024-12-09 23:49:18",
                    "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
                    "stc": 0,
                    "type": 1,
                    "alarmId": "4028fcf393abe04d0193abe372ca0177"
                },
            ]
            // 模拟数据
            this.query.pbEndTime = '2024-12-09 02:59:19'
            this.query.pbStartTime = '2024-12-08 00:59:19'
            if (list.length === 1) {
                // console.log('list',list);
                
                let { cardBindTime, cardUnBindTime, trackList } = list[0]
                const alarmIdList = trackList.filter(x => x.type === 1)
                // 模拟数据
                cardBindTime = '2024-12-07 21:59:19'
                cardUnBindTime = '2024-12-10 21:59:19'
                // 单人步骤条    
                this.fnChangeSteps(alarmIdList, cardBindTime, cardUnBindTime)
                // this.fnChangeSteps(alarmIdList,,cardUnBindTime)
            }
            if (list.length === 0) {
                this.list_step = []
                this.progress = false
            }
            if (list.length > 1) {
                list.forEach(i => {
                    if (i.trackList.length <= 0) return
                    i.trackList.forEach(x => {
                        if (x.type === 1) {
                            x = { ...x, 'personId': i.personId }  // 示例把personId添加到alarmIdList
                            alarmIdList.push(x)
                        }
                    })
                })

                // 多人步骤条
                this.fnChangeSteps(alarmIdList)
            }
            //生成轨迹数据
            const colors = list.map(x => x.color)
            this.$refs['proView'].handleLineAll(list, colors)








        },
        // 获取步骤条轨迹
        async getTrackListTrack(personIds,floorName='') {
            const { projectId, bidId } = this.query
            const params = {
                projectId,
                bidId,
                personIds,
                floorName
            }
            return await dvListTrack(params)

        },
        // 获取人员列表
        async getTrackListPerson() {
            const peopleList = {
                'ZJ': {
                    color: '#68F60C',
                    name: '评标专家组',
                    label: '评标专家',
                    children: []
                },
                'ZBDL': {
                    color: '#FFC30A',
                    name: '招标代理组',
                    label: '招标代理',
                    children: []
                },
                'JD': {
                    color: '#EB31D9',
                    name: '甲方代表组',
                    label: '甲方代表',
                    children: []
                }
            }
            const stringToColor = (str) => {
                let hash = 0;
                for (let i = 0; i < str.length; i++) {
                    hash = str.charCodeAt(i) + ((hash << 5) - hash);
                }
                const color = `#${((hash >> 0) & 0xFFFFFF).toString(16).padStart(6, '0')}`;
                return color;
            }
            const p = {
                projectId: this.query.projectId,
                bdId: this.query.bidId
            }
            const r = await dvListPerson(p)
            if (r.code !== 0 || r.data.length <= 0) return
            const personIds = r.data.map(x => x.personId)
            const guiji = await this.getTrackListTrack(personIds)
            if (guiji.code !== 0) return
            r.data.forEach((i) => {
                if (peopleList[i.personType]) {
                    i.checked = false
                    i.color = stringToColor(i.personName)
                    peopleList[i.personType].children.push(i)
                }
                const data = guiji.data.find(x => x.personId === i.personId)
                if (data) {
                    i.trackList = data.trackList
                }
                personIds.push(i.personId)
            })
            // console.log('peopleList',peopleList);
            this.list_people = peopleList
         
            
        },
        async fnGetAllAlarmId(item) {
            const r = await trackGetAlarm(item.alarmId)
            if (r.code === 0) {
                this.$set(item, 'content', r.data)
            }
            item.show = true
        },
        // 设置人员
        getAxiosDataRYpoint() {
            // 评标专家 
            // 招标代理
            // 甲方代表 
            const peopleList = [
                {
                    type: 'PBZJ',
                    color: '#68F60C',
                    points: [
                        { x: 360, y: 220, z: 3 },
                        { x: 370, y: 220, z: 3 }
                    ]

                },
                {
                    type: 'ZBDL',
                    color: '#FFC30A',
                    points: [
                        { x: 340, y: 220, z: 3 },
                        { x: 350, y: 220, z: 3 }
                    ]
                },
                {
                    type: 'JFDB',
                    color: '#EB31D9',
                    points: [
                        { x: 380, y: 220, z: 3 },
                        { x: 390, y: 220, z: 3 }
                    ]
                }
            ]
            // this.$refs["treeJScans"].setPeopleRadiusPoints(peopleList);
        },
        //   获取设置预警点位
        getAxiosDataYJpoint() {
            const points = this.cardlist;
            // this.$refs["treeJScans"].setWangerRadiusPoints(points);
        },
        handleDetailClick() {
            this.dialogDetail = true;
        },
        handleSelect(val) {
            this.curItem = val;
        },
    }
}
</script>

<style scoped lang="scss">
#visual {
    width: 100%;
    height: 100vh;
    background: url("../../../../assets/bg.jpg");
    overflow: hidden;
    background-size: 100% 100%;

    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav {
        cursor: default;
        justify-content:space-between;
        padding: 0 10px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        background: linear-gradient(#1f4bba, #051449, #1c46a7);;
        &-button {
            letter-spacing: 0.1em;
            padding: 4px 6px;
            border: 1px solid #0538d0;
            margin-right: 10px;
            font-size: 14px;

            &:hover {
                background: #4170fa;
                border-bottom: 1px solid #fff;
            }

            &.active {
                background: #4170fa;
                border-bottom: 1px solid #fff;
            }
        }
    }
    .main {
        height: calc(100vh - 140px);
        display: flex;
        flex-direction: row;
        .layout_content_left {
            flex: 1;
            padding: 10px;
            width: 200px;
            box-sizing: border-box;
            color: #fff;
            border: 1px solid rgb(59, 59, 255);

            .layout_content_left_span {
                display: inline-block;
                width: 90px;
                height: 20px;
                line-height: 20px;
                text-indent: 10px;
                border-radius: 6px;
                margin-bottom: 10px;
                color: #fff;
                background-color: #1890FF;
            }

            .imgbox {
                width: 90px;
                height: 97px;
                box-sizing: border-box;
                position: relative;
                margin-bottom: 10px;

                img {
                    width: 100%;
                    height: 100%;
                }

                div {
                    position: absolute;
                    bottom: 0px;
                    color: #fff;
                    width: 80px;
                    height: 20px;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 43%, rgba(0, 0, 0, 0.77) 100%);
                    border-radius: 0px 0px 2px 2px;

                    p {
                        line-height: 20px;
                        text-align: center;
                    }
                }

            }
        }

        .layout_content_right {
            display: flex;
            flex: 19;
            flex-flow: column nowrap;
            width: 0;
          

            ::v-deep .my-steps {
                padding-top: 52px;
                min-height: 90px;
                cursor: default;
                // transform: scale(0.8); 
                // margin-left: -220px;
                 .el-step__title{
                    color: #fff;
                 
                } 
                .el-step__description{
                    color: #fff;
                } 
                .el-step {
                    width: 220px;
                }
                .el-step__icon{
                    background: none;
                } 
                .el-step__line{
                    margin-left: 8px;
                }
                .el-step__icon{
                    // margin-left: -2px;
                }
                .box_description {
                    position: absolute;
                    top: -50px;
                    left: -100px;
                    background: #1890FF;
                    border: 1px solid rgba(24, 144, 255, 0.36);
                    color: #fff;
                    width: 100%;
                    text-align: left;
                    padding: 8px;
                    height: 40px;
                    border-radius: 4px;

                    .close {
                        position: absolute;
                        top: 0;
                        right: 4px;
                    }
                }
              

            }

            .box_3d {
                position: relative;
                // background-color: #EEF5FF;
                // border-top: 1px solid #C8C8C8;
                flex: 1;

                .name_box {
                    width: 116px;
                    height: 26px;
                    text-align: center;
                    line-height: 26px;
                    color: #fff;
                    background-color: #1890FF;
                    border-bottom-right-radius: 10px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                ::v-deep .lerg{
                    color: #fff;
                }
            }
        }
    }
}
</style>